<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>编写 DOM 脚本</title>
    <style>
        #divAdvert {
            background-color: gray;
        }
    </style>
</head>
<body>
<h1>My Heading</h1>
<p>This is some text in a paragraph.</p>

<span>Below is a table</span>
<table>
    <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 1</td>
    </tr>
</table>
<script>
    var tdElement = document.getElementsByTagName('td').item(0);
    tdElement.style.color = 'red';

    var tdElements = document.getElementsByTagName('td');
    for (var i = 0; i < tdElements.length; i++) {
        tdElements[i].style.color = 'red';
    }
</script>

<h1 id="heading1">My Heading</h1>
<p id="paragraph1">This is some text in a paragraph.</p>
<script>
    alert(document.getElementById('heading1'));

    var h1Element = document.getElementById('heading1');
    h1Element.style.color = 'red';
</script>

<p class="sub-title">This is a <span>special</span> paragraph element than contains <span>some text</span></p>
<script>
    var firstSpan = document.querySelector('.sub-title span');
    firstSpan.style.color = 'red';
    var spans = document.querySelectorAll('.sub-title span');
    var length = spans.length;
    for (var i = 0; i < length; i++) {
        spans[i].style.color = 'red';
    }
</script>

<script>
    var pElement = document.createElement('p');
    alert(pElement);
    var text = document.createTextNode('This is some text.');
    alert(text);
    var container = document.documentElement;
    alert(container);
    alert(container.tagName);
</script>

<script>
    var h1Element = document.getElementById('heading1');
    h1Element.style.color = 'red';

    var pElement;
    if (h1Element.nextSibling.nodeType == 1) {
        pElement = h1Element.nextSibling;
    } else {
        pElement = h1Element.nextSibling.nextSibling;
    }
    pElement.style.color = 'red';
</script>

<script>
    var pElement = document.getElementById('paragraph1');
    pElement.style.color = 'red';

    var h1Element;
    if (pElement.previousSibling.nodeType == 1) {
        h1Element = pElement.previousSibling;
    } else {
        h1Element = pElement.previousSibling.previousSibling;
    }
    h1Element.style.color = 'red';
</script>

<div id="divAdvert" style="color: green;">I am an advertisement.</div>
<script>
    var divAdvert = document.getElementById('divAdvert');
    divAdvert.style.color = 'blue';
    divAdvert.style.backgroundColor = 'gray';
</script>

<div id="divAdvert2" style="color: green;">I am an advertisement.</div>
<script>
    var divAdvert = document.getElementById('divAdvert2');
    alert(divAdvert.style.backgroundColor); // alerts an empty string
    alert(divAdvert.style.color);           // alerts green
</script>

<script>
    var divAdvert = document.getElementById('divAdvert');
    divAdvert.style.position = 'absolute';
    divAdvert.style.left = '100px';
    divAdvert.style.top = '100px';
</script>

<script>
    var element = document.createElement('div');
    var endPointX = 394;
    if (element.offsetLeft < endPointX) {
        //   continue animation
    }
</script>
</body>
</html>